<%@ page import="com.demo.main.utils.DateUtil" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/common/urls.jsp"/>
<html lang="zh-CN">
<head>
    <title>${applicationScope.PROJECT_NAME}-用户图书管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <%--图标icon--%>
    <link rel="icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/ico">

    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/lib/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <script src="${pageContext.request.contextPath}/lib/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/toast-manager.js"></script>
    <style>

    </style>
    <script>
        $(() => {

            /* 分页按钮点击时将条件加入url参数 */
            $('.page-link').each((index, element) => {
                const $link = $(element)
                const originalHref = $link.attr('href')

                $link.on('click', e => {
                    e.preventDefault()

                    // 解析原始href中的URL和参数
                    const url = new URL(originalHref, window.location.origin)
                    const params = url.searchParams

                    // 获取当前页面的参数
                    const currentParams = new URLSearchParams(window.location.search)

                    // 将当前页面的参数添加到新URL中，但不覆盖链接中已有的参数
                    currentParams.forEach((value, key) => {
                        if (!params.has(key)) {
                            params.append(key, value)
                        }
                    })

                    // 设置新的搜索参数
                    url.search = params.toString()

                    // 跳转到新的URL
                    window.location.href = url.toString()
                })
            })

            // 单独删除
            $('.delete-btn').on('click', function () {
                const bookId = $(this).data('book-id');
                const $row = $(this).closest('tr');

                if (confirm("确定要删除该记录吗？")) {
                    $.ajax({
                        url: `${adminUrl}/user_delete`,
                        method: 'get',
                        data: {id: bookId},
                        dataType: 'json',
                        success: (response) => {
                            const {message, isSuccess} = response;
                            showToast(message, isSuccess);

                            if (isSuccess) {
                                // 从DOM中移除该行
                                $row.remove();
                            }
                        },
                        error: (xhr, status, error) => {
                            showToast("删除失败，请重试", false);
                            console.error("删除时出错:", error);
                        }
                    });
                }
            });
        })
    </script>
</head>

<body>
<header class="navbar navbar-expand-lg navbar-dark bg-body-secondary">
    <div class="container-fluid">
        <a class="navbar-brand navbar-logo" href="#">
            <svg class="logo" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <path d="M10,5 L30,5 L35,10 L35,35 L5,35 L5,10 L10,5" fill="none" stroke="#1E88E5" stroke-width="2"/>
                <path d="M10,5 L10,10 L5,10" fill="none" stroke="#1E88E5" stroke-width="2"/>
                <path d="M12,15 L28,15 M12,20 L28,20 M12,25 L28,25 M12,30 L28,30" stroke="#1E88E5" stroke-width="1.5"/>
            </svg>
            <span>${applicationScope.PROJECT_NAME}</span>
        </a>
    </div>
</header>

<main class="main">
    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp"/>
    <!-- 主体部分 -->
    <div class="main-content">
        <%--    <h2 class="mb-4">订单查询</h2>--%>

        <!-- 查询表单 -->
        <form class="mb-4" method="get" action="${adminUrl}/user_condition">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username">
                </div>
                <div class="col-md-3">
                    <label for="name" class="form-label">姓名</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>
                <div class="col-md-3">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email">
                </div>
                <div class="col-md-3">
                    <label for="phone" class="form-label">手机号</label>
                    <input type="text" class="form-control" id="phone" name="phone">
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">查询</button>
                <button type="reset" class="btn btn-secondary">重置</button>
            </div>
        </form>

        <!-- 订单表格 -->
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>手机号</th>
                <th>注册日期</th>
                <th style="width: 134px">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="item" items="${list}">
                <tr>
                    <td>${item.userId}</td>
                    <td>${item.username}</td>
                    <td>${item.name}</td>
                    <td>${item.email}</td>
                    <td>${item.phone}</td>
                    <td>${DateUtil.localDateTimeToString(item.registrationDate)}</td>
                    <td>
                        <a href="${adminUrl}/view/user_edit?id=${item.userId}" class="edit-btn btn btn-sm btn-primary"
                           data-book-id="${item.userId}">编辑</a>
                        <button class="delete-btn btn btn-sm btn-danger" data-book-id="${item.userId}">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <%-- 分页 --%>
        <c:set var="pageNum" value="${param.pageNum == null ? 1 : param.pageNum}"/>
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="${adminUrl}/user_condition?pageNum=${pageNum - 1}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <c:forEach var="itemPageNum" begin="1" end="${pageCount}">
                <li class="page-item">
                    <a class="page-link" href="${adminUrl}/user_condition?pageNum=${itemPageNum}">
                            ${itemPageNum}
                    </a>
                </li>
            </c:forEach>
            <li class="page-item">
                <a class="page-link" href="${adminUrl}/user_condition?pageNum=${pageNum + 1}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</main>
<jsp:include page="/footer"/>
</body>
</html>